<template>

  <div style="height:100%">
        <div style="height:100%">
                <van-badge-group :active-key="activeKey" @change="onChange" >
                        <van-badge title="花材" />
                        <van-badge title="颜色"  />
                        <van-badge title="价格"  />
                        
                 </van-badge-group>
                 <!-- <div class="floor floor1">
                     <li>红玫瑰</li>
                     <li>粉玫瑰</li>
                     <li>白玫瑰</li>
                     <li>紫玫瑰</li>
                     <li>蓝色妖姬</li>
                     <li>香槟玫瑰</li>
                     <li>郁金香</li>
                     <li>康乃馨</li>
                     <li>百合</li>
                     <li>夫郎</li>
                     <li>向日葵</li>
                     <li>桔梗</li>
                     <li>进口玫瑰</li>
                     <li>永生花</li>
                     <li>123</li>
                </div> -->
                <router-view ></router-view>
           </div>
           <foot></foot>
  </div>
</template>



<style scoped>

.van-badge-group{
    width: 30%;
    height: 100%;
    background-color: #f8f8f8;
    float: left;
}

.floor{
    width:60%;
    float: right;
    padding:5%;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-content:space-between;
    height: 20rem;
  
}

.floor1 li{
    /* background-color:#000; */
    width:30%;
    font-size: 1rem;
    color: #a9a9a9;
    font-family: "宋体";
    padding-top: 0.5rem;
    font-weight: 700;
}
</style>

<script>
    import foot from "@/components/footer.vue";
    import floor1 from "@/components/floor1.vue"
    export default {
        components: {
            foot
        },
        data() {
            return {
                activeKey: 0
            };
        },
        methods: {
            onChange(key) {
                this.activeKey = key;
                console.log(this.activeKey)
               if(key==0){
                this.$router.push("/kind/floor1")
               }else if(key==1){
                this.$router.push("/kind/floor2")
               }else if(key==2){
                this.$router.push("/kind/floor3")
               }else{
                   console.log("索引出错")
               }
            }
        }
    }
</script>